<template>
	<div class="banner">
		<el-row justify="space-between">
			<el-col :span="4">
				<span>类型</span>
			</el-col>
			<el-col :span="3">
				<span><el-button type="primary" @click="getaddBan()"><el-icon><circle-plus /></el-icon>添加</el-button></span>
			</el-col>
		</el-row>
		<div class="border-bottom"></div>
		<el-table 
		:data="list" border
		 :default-sort="{ prop: 'hot', order: 'ascending ' }"
		  style="width: 100%" 
		  height="840">
			<el-table-column prop="memo" label="描述" show-overflow-tooltip />
			<el-table-column prop="hot" label="热度" sortable width="120" />
			<el-table-column prop="type" label="类型" sortable  width="120" />
			<el-table-column label="图片">
				<template #default="scope">
					<img :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`" >
				</template>
			</el-table-column>
			<el-table-column label="操作" width="100">
				<template #default="scope">
					<el-button 	@click="remove(scope.row.id)" size="mini" type="primary">
						<el-icon><delete /></el-icon>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import {CirclePlus,Delete} from "@element-plus/icons-vue"
	export default{
		name:'Banner',
		data(){
			return{
				list:[]
			}
		},
		components:{
			CirclePlus,
			Delete
		},
		methods:{
			//异步请求数据
			select(){
				this.axios.get('/api/adm/hot/findAll').then((res)=>{
					this.list=res.data.data
				}).catch((error)=>{
					console.log(error);
				})
			},
			//删除
			remove(id){
				//根id删除当前数据
					this.axios.delete('/api/adm/hot/delete/'+id).then((res)=>{
						if(res.data.code===200){
							this.select()//刷新数据
							alert('删除成功！')
						}
					}).catch((error)=>{
						console.log(error);
					})
			},
			getaddBan(){
				this.$router.push({path:'/addbannerimg'})
			}
		},
		created() {
			this.select()
		}
	}
</script>

<style>
	.banner{
		width: 100%;
		height: 100%;
		background-color: white;
		overflow: auto;
	}
	.border-bottom{
		margin: 5px 0;
		border-bottom: 2px solid #7f7f7f;
	}
	.cell img{
		width: 100px;
		height: 100px;
	}
</style>
